<template>
<div class="chapterlist">
     <div class="header">
            <img src="../../assets/image/logo.png" alt="">
            <h1>文章详情</h1>
        </div>

    <!-- 文章主题信息 -->
    <div class="container">
        <div class="dinwei">
            <div class="containerleft">
            <img :src="articledata.imgurl" alt="">
        </div>
        <div class="containerright">
        <div class="header1">
            <h1>{{articledata.bookname}}</h1>
            <span>{{author}}</span>
            <span>著</span>
            <span>8.5</span>
        </div>
        <div class="center1">
            <span>连载</span>
            <span>学习</span>
            <span>前端</span>
            <span>互联网</span>
        </div>
        <div class="introduction1">
            <p>{{articledata.introduction}}</p>
        </div>
        <div class="footer1">
            <ul>
                <li><span>255</span>万字</li>
                <li><span>2</span>万推荐</li>
                <li><span>1455</span>周推荐</li>
            </ul>
        </div>
        <div>
            <el-button @click="goUsersChat">加入群聊</el-button>
        </div>
        </div>
        </div>
    </div>

    <div class="chaptermulu">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="作品信息" name="first">
                
                <p>收藏：{{number>0?number:'0'}}</p>
                <p>总获赞数：{{zannumber}}</p>
                <p>热门评论</p>
                <comment :commentlist='commentlist' @handleMethods='getallcomment' />
                </el-tab-pane>
                
            <el-tab-pane label="目录" name="second">
                <h2>正文卷·共132章免费本卷共344650字</h2>
                    <ul class="chaptertitlelist">
                        <li v-for="(item,index) in chaptertitlelist" 
                        :key="item.chapterid"><a  @click.prevent="goreadpage(item.chapterid,index)">第{{index+1}}章&nbsp;{{item.chaptertitle}}</a></li>
                    </ul>

                 <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="chapter.pageNumber"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
            </el-tab-pane>
        </el-tabs> 
    </div> 
</div>
</template>
<script>
  
import comment from '../common/comment'
  export default {
    data() {
      return {
          commentlist:[],
          author:'',
          zannumber:0,
          number:0,
        currentPage3:1,
        activeName: 'first',
        articledata:{},
        chaptertitlelist:[],
        chapter:{
             articleid:0,
             page:1,
             pageNumber:999
        }
      };
    },
    components:{
        comment,
    },

    created(){  
        // 获取文章id
        // console.log(this.$route.params.articleid)
        this.chapter.articleid=this.$route.params.articleid

        //将当前阅读的文章id存到全局
        this.$store.commit('putarticleid',this.$route.params.articleid)

        //根基id获取基本的文章信息
        this.getchapterlistdata()

        //获取总收藏量
        this.getCollectionNumber()

        //获取总点赞数
        this.getALLzan()

        //获取全部评论
        this.getallcomment()   
    },

    beforeDestroy(){
        //保存历史记录
        // this.updatahistory()
    },
    methods: { 
        //前往群聊页面
        goUsersChat(){
            this.$router.push("/chat/chats")
        },
        //
        handlegetall(){
            this.getallcomment()
        },

          //获取全部评论
        async getallcomment(){
            let data=await this.axios.get(`article/getallcomment?articleid=${this.$store.state.articleid}`)
            this.commentlist=data.data.data
            // console.log(data.data.data)
        },

         //获取总点赞数
        async getALLzan(){
            let data=await this.axios.get(`chapter/allzan?articleid=${this.$route.params.articleid}`)
            this.zannumber=data.data.length
            // console.log(this.zannumber)
        },

        //获取总收藏量
        async getCollectionNumber(){
            let data=await this.axios.get(`article/getCollectionNumber?articleid=${this.$route.params.articleid}`)
            this.number=data.data.number
        },
        //点击收藏
        async collectarticle(){
          let data=await this.axios.post('article/collectarticle',{
              articleid:this.$store.state.articleid,
              readerid:this.$store.state.readerdata.id,
          })  
          this.$message.success("收藏成功")
        },

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

        //通过id前往阅读页
        goreadpage(pagenumber,id){
            this.$store.commit("putchapterid",id+this.chapter.pageNumber*(this.chapter.page-1))
            this.$router.push(`/readpage/${pagenumber}`)
        },

        //通过文章id获取目录
        async getchapterlist(){
            let data=await this.axios.get("chapter",{
                params:this.chapter
            })
            // console.log(data.data.data)
            let chapteridarr=data.data.data.map(item=>{
                return item.chapterid
            })
            //保存章节数组到store
            this.$store.commit("putchapteridarr",chapteridarr)
            // console.log(chapteridarr)
            this.chaptertitlelist=data.data.data
        },

        //获取文章基本信息
        async getchapterlistdata(){
            let data=await this.axios.get(`article/getonearticle?articleid=${this.chapter.articleid}`)
            // console.log()
            
            this.articledata=data.data.data[0]
   
            let data1=await this.axios.get(`user/getauthor?id=${data.data.data[0].authorid}`)
            //  console.log(data1.data.author)
            this.author=data1.data.author
        },

      handleClick(tab, event) {
          if(tab.index==1){
               //通过文章id获取目录
        this.getchapterlist()
          }
        // console.log(tab.index, event);
      }
    }
  };
</script>
<style lang="less" scoped>
 .chapterlist{
     min-height: 100vh;
     background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
       .header{
        padding-left: 200px;
        padding-right: 200px;
        height:100px;
        max-width: 100vw;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        position: relative;
        display: flex;
        img{
            flex: 2;
            height: 100px;
            display: inline-block;
        }
        h1{
            flex: 3;
            color: #2ed573;
            display: inline-block;
            text-align: center;
            height:100px;
            line-height: 100px;
            letter-spacing:20px;
        }
    }

    .container {
        padding: 100px 250px;
        
       .dinwei{
           border: 2px solid #ccc;
           border-bottom: none;
           padding:20px;
           display: flex;
           .containerleft {
      flex: 1;
    img {
       width: 80%; 
    }
  }

  .containerright {
      flex: 3;
      display: flex;
      flex-direction: column;
        div.header1 {
            flex:1;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;

  h1 {
      margin-right: 15px;
  }

  span {
      margin-right: 10px;
  }
  :nth-child(4){
      margin-left: 24px;
      font-size: 24px;
      color: #cbcbcc;
  }
}

div.center1 {
    flex: 1;
    display: flex;
    align-items: center;
  span {
      display: inline-block;
    //   width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      padding: 0 15px;
      margin-right: 20px;
      border-radius: 15px;
      border: 1px solid #34495e;
  }
  :nth-child(2){
     border: 1px solid #2c3e50; 
  }
  :nth-child(3){
     border: 1px solid #e67e22; 
  }
  :nth-child(4){
     border: 1px solid #e74c3c; 
  }
}

div.introduction1 {
    flex: 1;
    p{
            overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;

    }
}

div.footer1 {
    flex: 1;

  ul {
      list-style: none;
        display: flex;

    li {
        margin-right: 15px;
        span{
            font-size: 24px;
            font-weight: 550;
            margin-right:5px ;
        }
    }
  }
}
  }
       }

  
}

.chaptermulu {
    padding: 0px 150px;
    .el-tab-pane{
        width: 100%;
        p{
            height: 30px;
            font-size: 16px;
            font-weight: 550;
        }
        h2{
            height: 40px;
            color: #999;
            border-bottom: 2px solid #333;
        }
        .block{
            margin-top:30px;
        }

       .chaptertitlelist{
           display: flex;
           flex-wrap: wrap;
           list-style: none;
           li{
               width: 33.33%;
               height: 50px;
               border-bottom:1px solid #ddd;
               line-height: 50px;
               a{
                   text-decoration: none;
                   cursor: pointer;
               }
               a:hover{
                   color: chocolate;
               }
           }
       } 
    }
}


 }
</style>
    
